import React, { Component } from 'react';
import css from './index.less';
import FilterSearch from '@/components/FilterSearch';
import TableList from '@/components/TableList';
import EditModal from '@/components/EditModal';
import { Button, Divider, message } from 'antd';
import { connect } from 'dva';
import Status from '@/pages/components/Status';
import { getStatus } from '@/utils/business';
import { Link } from 'umi';
type State = {};
type Props = {};

class Department extends Component<Props> {
  constructor(props: any) {
    super(props);
    this.state = {
      selectProject: null,
    };
  }
  table: any = null;
  goDetail = (data: any, readOnly: boolean) => {
    if (data && data.project && data.project.locked && !readOnly) {
      return message.error('该项目已锁定，无法编辑');
    }
    const url = `declareManage/yearManage/edit?id=${data.uuid ||
      ''}&readOnly=${readOnly || ''}&fromType=1`;
    this.props.dispatch({
      type: '$router/forward',
      payload: {
        url,
      },
    });
  };

  transferProject = (type = 5) => {
    const { selectProject } = this.state;
    const urlObj: any = {
      1: 'declareManage/yearManage/edit',
      3: 'declareManage/planManage/edit',
      5: 'declareManage/storeManage/edit',
    };
    const url = `${urlObj[type]}?id=${selectProject.uuid}&transType=${type}&fromType=1`;
    this.props.dispatch({
      type: '$router/forward',
      payload: {
        url,
      },
    });
  };

  /**
   * 除项目
   * @param data
   */
  deletePost(data) {
    this.props
      .dispatch({
        type: 'base/delete',
        payload: {
          url: '/api/project/report/v1/annualReport/del',
          type: '该项目',
          data: {
            uuid: data.uuid,
          },
        },
      })
      .then(() => {
        this.table.fetch();
      });
  }
  filters = [
    {
      key: 'year',
      type: 'select',
      label: '申报年份',
      options: this.props.dict.searchYear,
    },
    {
      key: 'name',
      type: 'input',
      label: '项目名称',
      placeholder: '请输入项目名称',
    },
  ];
  rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      this.setState({
        selectProject: selectedRows[0],
      });
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        'selectedRows: ',
        selectedRows,
      );
    },
    getCheckboxProps: (record: any) => ({
      disabled: record.name === 'Disabled User', // Column configuration not to be checked
      name: record.name,
    }),
  };

  editFilters = [
    {
      key: 'name',
      type: 'input',
      label: '项目名称',
      rules: [
        {
          required: true,
        },
      ],
      placeholder: '请输入项目名称',
    },
  ];
  columns = [
    {
      title: '项目ID',
      dataIndex: ['project', 'no'],
      width: 150,
      render: (text, data) => (
        <Button type="link" onClick={() => this.goDetail(data, true)}>
          {text}
        </Button>
      ),
    },
    { title: '项目名称', dataIndex: 'name' },
    {
      title: '申报日期',
      dataIndex: 'createTime',
      format: 'YYYY-MM-DD',
      width: 150,
    },
    { title: '项目性质', dataIndex: 'buildType' },
    { title: '项目类型', dataIndex: ['serviceTypeData', 'display'] },
    { title: '行业领域', dataIndex: ['professionData', 'display'] },
    { title: '总投资（万元）', dataIndex: 'totalInvestment', width: 150 },
    { title: '申报年份', dataIndex: 'buildYear' },
    {
      title: '状态',
      dataIndex: 'approveStatus',
      render: (text, data) => <Status data={data} type={2} />,
    },
    {
      title: '操作',
      width: 225,
      render: (text: string, data: any) => (
        <>
          {data.project.locked ? (
            ''
          ) : (
            <span key={text}>
              <Button onClick={() => this.goDetail(data, false)}>编辑</Button>
              <Divider type="vertical" />
              <Button onClick={() => this.deletePost(data)}>删除</Button>
            </span>
          )}
        </>
      ),
    },
  ];
  render() {
    const { selectProject } = this.state;
    return (
      <div>
        <FilterSearch
          filters={this.filters}
          onSearch={val => this.table.fetch(val)}
        >
          <Button onClick={this.goDetail} type="primary">
            添加
          </Button>
          <Button
            onClick={() => this.transferProject(3)}
            disabled={!selectProject || !this.props.approve.plan}
          >
            转三年规划项目
          </Button>
          <Button
            onClick={() => this.transferProject(5)}
            disabled={!selectProject}
          >
            转五年储备项目
          </Button>
        </FilterSearch>
        <TableList
          tableProps={{
            rowSelection: {
              type: 'radio',
              ...this.rowSelection,
            },
          }}
          post
          rowKey="id"
          onRef={c => {
            this.table = c;
          }}
          columns={this.columns}
          source="/api/project/report/v1/annualReport/query"
        />
      </div>
    );
  }
}

export default connect(state => state.base)(Department);
